<template>
	<!-- 小纸条/聊天列表 -->
	<view class="chat-msg-item">
		<!-- 时间 -->
		<view class="chat-msg-tip">
			{{formatTime}}
		</view>
		<!-- 消息 -->
		<view class="chat-msg-normal" :class="{'chat-msg-mine':item.fromId === user.id}">
			<u-avatar class="avatar" :src="imageUrl(item.fromId === user.id?user.avatar:chooseUser.avatar)"></u-avatar>
			<view class="chat-msg-content">
				<view v-if="item.fromId !==user.id" class="chat-msg-top">
					<text>{{item.fromName}}</text>
				</view>
				<view class="chat-msg-bottom">
					<view>
						<rich-text class="chat-msg-text" :nodes="item.content"></rich-text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $time from '@/utils/lib/time.js'
	export default {
		props: {
			item: {
				type: Object,
				default: () => ({})
			}, // 当前消息
			pretime: [Number, String], // 上一条消息时间
		},
		data() {
			return {
				user: {
					id: undefined,
					avatar: undefined
				},
				chooseUser: {
					avatar: undefined
				}
			}
		},
		created() {
			this.init()
		},
		computed: {
			// 格式化时间
			formatTime() {
				return $time.getChatTime(new Date(this.item.createTime).getTime(), new Date(this.pretime).getTime())
			}
		},
		methods: {
			init() {
				this.user.id = this.vuex_user.id
				this.user.avatar = this.vuex_user.avatar
				this.chooseUser.avatar = this.item.fromId === this.user.id ? this.item.toAvatar : this.item.fromAvatar
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-msg-item {
		padding: 2rpx 20rpx;

		.chat-msg-tip {
			line-height: 60rpx;
			text-align: center;
			color: #555;
			font-size: 24rpx;
			padding: 10rpx;
		}

		.chat-msg-normal {
			position: relative;
			font-size: 0;
			margin-bottom: 15rpx;
			padding-left: 110rpx;
			min-height: 80rpx;

			.avatar {
				position: absolute;
				top: 0;
				left: 0;
			}

			.chat-msg-content {
				text-align: left;

				.chat-msg-top {
					display: flex;
					flex-wrap: nowrap;
					color: #333;
					font-size: 24rpx;
					line-height: 24rpx;

				}

				.chat-msg-bottom {
					display: inline-block;
					padding-right: 80rpx;

					.chat-msg-text {
						position: relative;
						line-height: 60rpx;
						margin-top: 10rpx;
						padding: 10rpx 20rpx;
						background-color: white;
						border-radius: 10rpx;
						color: #333;
						font-size: 30rpx;
						text-align: left;
						display: block;
						word-break: break-all;
						white-space: pre-line;
						box-shadow: 1px 1px 1px #c0c0f0;

						&:after {
							content: "";
							position: absolute;
							left: -20rpx;
							top: 26rpx;
							width: 6rpx;
							height: 6rpx;
							border-style: solid dashed dashed;
							border-color: white transparent transparent;
							overflow: hidden;
							border-width: 18rpx;
						}
					}

					.chat-realtime {
						display: flex;
						align-items: center;

						.iconfont {
							font-size: 20px;
							padding-right: 8px;
						}
					}


				}
			}


			&.chat-msg-mine {
				text-align: right;
				padding-left: 0;
				padding-right: 110rpx;

				.avatar {
					left: auto;
					right: 0;
				}

				.chat-msg-content {
					text-align: right;

					.chat-msg-bottom {
						padding-left: 80rpx;
						padding-right: 0;

						.chat-msg-text {
							margin-left: 10px;
							background-color: #587ff0;
							color: #fff;
							box-shadow: 1px 1px 1px #ccc;

							&:after {
								left: auto;
								right: -10px;
								border-top-color: #587ff0;
							}
						}

					}
				}
			}

		}
	}
</style>